<!DOCTYPE html>
<html xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
	<meta name="author" content="Coderthemes">
	<link rel="stylesheet" href="/static/plugins/dagre/css/workflow.css" media="all" >

	<title></title>
</head>
<body>
<svg width="100%" ><g/></svg>
<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/static/plugins/dagre/js/d3.v3.min.js"></script>
<script type="text/javascript" src="/static/plugins/dagre/js/dagre-d3.min.js"></script>
<script type="text/javascript">
	$(function () {
		var g = new dagreD3.graphlib.Graph()
				.setGraph({})
				.setDefaultEdgeLabel(function() { return {}; });


		var pointList = [];
		var pointSideList = [];
		$.ajax({
			url: '/api/inter/tpShopRegisterPhaseSet/getWorkFlowList',
			data: {},
			type: 'POST',
			async: false,
			success: function (result) {
				if (result.code == '0') {
					pointList = result.pointList;
					pointSideList = result.pointSideList;
				} else {
					layer.msg('出问题了，请稍后重试！', {icon: 2});
					setTimeout(function () {
						window.parent.location.reload();
					}, 1000);
				}
			}
		});

		if(pointList!=null && pointList.length>0){
			for(var i=0;i<pointList.length;i++){
				if(pointList[i].setType=='0'){
					g.setNode(pointList[i].id,  { label: pointList[i].phaseName,class: "type-TK" });
				}
			}
		}

		g.nodes().forEach(function(v) {
			var node = g.node(v);
			// Round the corners of the nodes
			node.rx = node.ry = 5;
		});

		if(pointSideList!=null && pointSideList.length>0){
			for(var i=0;i<pointSideList.length;i++){
				g.setEdge(pointSideList[i].startPoint, pointSideList[i].endPoint);
			}
		}

		// Create the renderer
		var render = new dagreD3.render();

		// Set up an SVG group so that we can translate the final graph.
		var svg = d3.select("svg"),
				svgGroup = svg.append("g");

		// Run the renderer. This is what draws the final graph.
		render(d3.select("svg g"), g);

		// Center the graph
		var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
		svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
		svg.attr("height", g.graph().height + 40);
		//var svgW = ($(window).width());
		//var svgH = ($(window).height());
		var svgW = g.graph().width;
		var svgH = g.graph().height;
		svg.attr("viewBox", [(g.graph().width/2)-(svgW/2), (g.graph().height /2)-(svgH/2), svgW, svgH]);
	});


</script>
</body>

</html>
